<template>
  <!-- 催收执行页-案件信息模块-月结欠款信息 -->
  <section class="component overdue-amount-info">
    <data-box :data="dataSet">
      <template slot="columns">
        <el-table-column prop="customerCode" label="月结号" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="idCard" label="证件号码" :formatter="(row)=>$filter.encryptIDCardFour(row.idCard)" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" show-overflow-tooltip :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="startDue" label="开始逾期日期" :formatter="(row) => $filter.dateTimeFormat(row.overdueDate)" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="ptDate" label="生成数据日期" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="totalOverdueAmount" label="逾期金额" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(3)"></el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from "~/core/decorator";
import DataBox from '~/components/common/data-box.vue';
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service';
import { Emit, Prop, Watch } from "vue-property-decorator";

@Component({
  components: {
    DataBox
  },
})
export default class OverdueAmountInfo extends Vue {
   @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Prop()
  private idCard: string
  private dataSet: any[] = [];


  public queryInfo(id: string) {
    this.caseOperatorPageService.getMonthlyArrearsInformation(id).subscribe(
      data => this.dataSet = data
    )
  }

  private activated() {
    if (this.idCard) this.queryInfo(this.idCard)
  }

}
</script>

<style lang="less" scoped>
</style>
